<template>
  <div>
    <div v-for="(item1, index) of homepic" :key="item1.homepicid">
      <div :homepic="homepic">
        <router-link to="/search">
          <van-image
           lazy-load
           width="100%"
           height="100%"
           :src="item1.img"
           @load="show(index)"
          />
        </router-link>
      </div>
      <ul class="hotlist showlist" :hotlist="hotlist[index]">
          <li class="hotitem" v-for="item of hotlist[index]" :key="item.proid" @click="toDetail(item.proid)">
            <div class="itemimg">
              <van-image
                lazy-load
                width="100%"
                height="100%"
                :src="item.proimg"
              />
            </div>
            <div class="iteminfo" style="background-color: #fff;">
              <div style="width:90%;margin:0 auto;font-size:.13rem;padding-top:.1rem;">
                <h3>{{ item.name }}</h3>
                <h4>￥{{ item.price.toFixed(2) }}</h4>
              </div>
            </div>
          </li>
          <li class="hotitem" style="position:relative;top:-.06rem;" @click="$router.push('/search')">
            <div class="itemimg" style="background:white;">
              <van-image
                lazy-load
                width="100%"
                height="100%"
                style="position:relative;top:-.2rem;"
                src="https://pic.flyco.net.cn/mall/cms/home/more.png?q=2"
              />
            </div>
            <div class="iteminfo" style="background:white;padding-bottom:.06rem;">
              <h3>更多</h3>
              <h4>more</h4>
            </div>
          </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Image, Lazyload } from 'vant'
import { getCategoryTypeList } from '@/api'
Vue.use(Image)
Vue.use(Lazyload)
export default {
  props: {
    homepic: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      index: 1,
      hotlist1: [], // // 定义一个空数组用于接受不同类型的返回数据
      hotlist: [],
      type: ['剃须刀', '电吹风', '理发器', '烫发器', '插座', '毛球修剪器']
    }
  },
  methods: {
    toDetail (proid) {
      this.$router.push({ path: '/product/' + proid })
    },
    // 显示对应产品类型数据
    show (index) {
      // console.log(index)
      getCategoryTypeList({ type: this.type[index], limit: 5 }).then(res => {
        this.hotlist.push(this.hotlist1)
        this.hotlist[index] = res.data.data
        console.log(this.hotlist[index])
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.hotlist {
  @include clearfix();
  @include rect(100%,auto);
  overflow: auto;
  white-space: nowrap;
  border-radius: .15rem;
  .hotitem {
    display:inline-block;
    @include rect(1.5rem,auto);
    .itemimg {
      @include rect(100%, auto);
      @include display(block);
      background-color: #f7f7f7;
      img {
        @include rect(100%,auto);
        @include display(block);
      }
    }
    .iteminfo {
      @include rect(100%,auto);
      @include display(block);
      text-align: center;
      h3 {
        @include ellipsis(100%,1);
      }
      h4 {
        color: #faa19b;
      }
    }
  }
}
.showlist {
  width:95%;
  margin:0 auto;
  position: relative;
  top:-.4rem;
  z-index: 999;
  margin-bottom: -.2rem;
}
</style>
